<script>
import TableComponent from "./TableComponent.vue";
import Header from "@/views/Components/Header/header.vue";
import Footer from "@/views/Components/Footer/footer.vue";
import Header1 from "@/views/Components/Header/header1.vue";
import {getOrderList} from "@/api/order/OrderService";
export default {
    data() {
        return {
            activeName: "first",
            allOrderList: [], // 所有订单信息
            tableDate: [], //表格中展示的订单 筛选后,
            contain: [
                "我的订单",
                "","",""
            ]
        };
    },
    components: {
        TableComponent,
        Header,
        Footer,
        Header1,
    },
    created() {
        this.getOrderList();
    },
    methods: {
        handleClick(tab, event) {
            this.tableDate = [];
            if (this.activeName === "first") {
                this.tableDate = this.allOrderList;
            }
            if (this.activeName === "second") {
                this.tableDate = this.allOrderList.filter((item) => {
                    return item.status === 1;
                });
            }
            if (this.activeName === "third") {
                this.tableDate = this.allOrderList.filter((item) => {
                    return item.status === 2;
                });
            }
            if (this.activeName === "fourth") {
                this.tableDate = this.allOrderList.filter((item) => {
                    return item.status === 3;
                });
            }
            if (this.activeName === "fifth") {
                this.tableDate = this.allOrderList.filter((item) => {
                    return item.status === 4;
                });
            }
            if (this.activeName === "sixth") {
                this.tableDate = this.allOrderList.filter((item) => {
                    return item.status === 5;
                });
            }
        },
        async getOrderList(val) {
            console.log("val", val);
            this.allOrderList = [];
            await getOrderList().then((res) => {
                if (res && res.data) {
                    this.allOrderList = res.data;
                    // this.tableDate = res.data;
                    this.activeName = val ? val : "first";
                    this.handleClick();
                }
            });
        },
    },
};
</script>

<template>
    <div>
        <Header />
        <Header1 :contain="contain" fS="30px" />
        <div class="orderSty">
<!--            <div class="title">我的订单</div>-->
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="所有订单" name="first">
                    <table-component :tableDate="tableDate" :activeName="activeName" @reLoad="getOrderList"></table-component>
                </el-tab-pane>
                <el-tab-pane label="待付款" name="second">
                    <table-component :tableDate="tableDate" :activeName="activeName" @reLoad="getOrderList"></table-component>
                </el-tab-pane>
                <el-tab-pane label="待发货" name="third">
                    <table-component :tableDate="tableDate" :activeName="activeName" @reLoad="getOrderList"></table-component>
                </el-tab-pane>
                <el-tab-pane label="待收货" name="fourth">
                    <table-component :tableDate="tableDate" :activeName="activeName" @reLoad="getOrderList"></table-component>
                </el-tab-pane>
                <el-tab-pane label="已收货" name="fifth">
                    <table-component :tableDate="tableDate" :activeName="activeName" @reLoad="getOrderList"></table-component>
                </el-tab-pane>
                <el-tab-pane label="已关闭" name="sixth">
                    <table-component :tableDate="tableDate" :activeName="activeName" @reLoad="getOrderList"></table-component>
                </el-tab-pane>
            </el-tabs>
        </div>
        <Footer />
    </div>
</template>


<style lang="scss" scoped>
.orderSty {
    min-height: calc(100vh - 300px);
    width: 75%;
    margin: 0 auto;
    .title {
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        font-weight: 700;
        color: #333;
        margin: 10px 0;
    }
}
</style>
